<style lang="scss" scoped>

</style>
<template>
    <i-article>
        <article>
            <seamless-brief>
                <Alert show-icon style="margin-top: 16px">
                    <code>import { loading } from 'kzjr_ui'</code>
                </Alert>
            </seamless-brief>
            <Demo title="Loading" :vertical="true">
                <div slot="demo">
                    <kzjr-button type="primary" @click="ajax">ajax loading</kzjr-button>
                </div>
                <div slot="desc">
                    <p>基本用法。默认参数</p>
                </div>
                <i-code lang="html" slot="code">{{ code }}</i-code>
            </Demo>
            <Table border :columns="columns1" :data="data1"></Table>
        </article>
    </i-article>
</template>
<script>
    import iArticle from '../../component/article.vue'
    import iCode from '../../component/code.vue'
    import Demo from '../../component/demo.vue'
    import Code from '../../code/kzjrloading'
    import seamlessBrief from '../brief/kzjr.vue'
    import columns from '../../data-manage/columns'
    import Vue from 'vue'
    import { button, AjaxLoading } from 'kzjr_ui'

    Vue.use(button)

    export default {
        components: {
            iArticle,
            iCode,
            Demo,
            seamlessBrief
        },
        data () {
            return {
                code: Code,
                currrnt: 1,
                columns1: columns,
                data1: [
                    {
                        key1: 'loading.open()',
                        key2: '开启loading',
                        key3: '——',
                        key4: '——',
                        key5: '——'
                    },
                    {
                        key1: 'loading.close()',
                        key2: '关闭loading',
                        key3: '——',
                        key4: '——',
                        key5: '——'
                    }
                ]
            }
        },
        methods: {
            ajax () {
                AjaxLoading.open()
                setTimeout(() => {
                    AjaxLoading.close()
                }, 2800);
            }
        }
    }
</script>